<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>研学请假系统</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="whole_wrapper">
        <div class="top">
            <div class="welcome">欢迎使用本请假系统！</div>
            <div class="user">
                <div id="avatar">
                    <img src="./img/avatar.png">
                    <div id="user_event">注销</div>
                </div>
                <div id="user_name"></div>
            </div>
        </div>
        <div class="main">
            <dialog>
                <h1>请假成功</h1>
                <button id="close_dialog">关闭</button>
            </dialog>
            <div id="director">
                <div class="logo">
                    <img src="./img/yundinglogo.png">
                </div>
                <div class="director_item">首页</div>
                <div class="director_item">请假</div>
                <div class="director_item">调研学</div>
                <div class="director_item">个人信息</div>
                <div class="director_item">关于我们</div>
            </div>
            <div class="banner">
                <div class="banner_item">
                    <div class="words">
                        <img src="./img/words.png">
                    </div>
                </div>
                <div class="banner_item">
                    <div class="content">
                        <div class="content_top">
                            <p style="color: white;">请假系统为您开放！</p>
                            <div class="btn">
                                <a href="javascript:;" id="leave_record">
                                    <img src="/image/1.png" alt=""><span>已请假<span style="color: red;">0</span>次</span>
                                </a>
                                <a href="#" id="leave_log">
                                    <img src="/image/6.png" alt=""><span>请假历史</span>
                                </a>
                            </div>
                        </div>
                        <div class="content_main">
                            <div class="leave_name">
                                <img src="/image/8.png" alt=""><span>申请人</span>
                                <input type="text" id="leave_info">
                            </div>
                            <div class="leave_message">
                                <img src="/image/3.png" alt="">
                                <span>性别</span>
                                <select name="" id="leave_info">
                                    <option selected disabled></option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                                <img src="/image/9.png" alt="">
                                <span>方向</span>
                                <select name="" id="leave_info">
                                    <option selected disabled></option>
                                    <option value="全栈">全栈</option>
                                    <option value="Java">Java</option>
                                    <option value="人工智能">人工智能</option>
                                    <option value="CPU&OS">CPU & OS</option>
                                    <option value="设计">设计</option>
                                    <option value="秘书处">秘书处</option>
                                </select>
                                <img src="/image/4.png" alt="">
                                <span>期次</span>
                                <select name="" id="leave_info">
                                    <option selected disabled></option>
                                    <option value="六">六</option>
                                    <option value="七">七</option>
                                    <option value="八">八</option>
                                </select>
                            </div>
                            <div class="leave_time">
                                <img src="/image/7.png" alt="">
                                <span>请假时间</span>
                                <input type="text" placeholder="年-月-日" id="leave_info">
                                <select name="" id="leave_info" style="margin-right: 0px;">
                                    <option selected disabled></option>
                                    <option value="一">一</option>
                                    <option value="二">二</option>
                                    <option value="三">三</option>
                                    <option value="四">四</option>
                                </select><span>节</span>
    
                            </div>
                            <div class="leave_cause">
                                <img style="vertical-align:top;" src="/image/5.png" alt="">
                                <label style="vertical-align:top;">请假理由</label>
                                <textarea name="" id="leave_info" cols="70" rows="3"></textarea>
                            </div>
                            <div class="leave_btn"><button>提交</button></div>
                        </div>
                    </div>
                    <div class="wrapper">
                        <div class="banner_top">
                            <div class="back_btn" id="back_btn">返回</div>
                            <div class="detail">
                                <input id="name1" type="text" placeholder="输入名字发起搜索">
                                <button id="search1">搜索</button>
                                <div class="history"><img src="https://s2.loli.net/2023/02/03/QjUeVA4XqZgaG9p.png"  style="width:16px;height: 16px;"><span id="history1" style="cursor: pointer;">本周历史</span></div>
                            </div>
                        </div>
                        <div class="banner_hidden">
                            <p>还没有请假记录哦~~</p>
                        </div>
                        <div class="banner_table">
                            <table>
                                <colgroup>
                                    <col class="col1">
                                    <col class="col2">
                                    <col class="col2">
                                    <col class="col2">
                                    <col class="col3">
                                </colgroup>
                                <tr>
                                    <th>姓名</th>
                                    <th class="fangxiang">方向<div class="fx1">
                                        <select id="f1">
                                            <option style='display: none'></option>
                                            <option value="秘书处">秘书处</option>
                                            <option value="设计">设计</option>
                                            <option value="AI">AI</option>
                                            <option value="CPU&OS">CPU&OS</option>
                                            <option value="Java">Java</option>
                                            <option value="全栈">全栈</option>
                                        </select>
                                    </div></th>
                                    <th class="qishu">期数<div class="fx2">
                                        <select id="f2">
                                            <option style='display: none'></option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                        </select>
                                    </div></th>
                                    <th class="shijian">请假时间<div class="fx3">
                                        <select id="f3">
                                            <option style='display: none'></option>
                                            <option value="第一节">第一节</option>
                                            <option value="第二节">第二节</option>
                                            <option value="第三节">第三节</option>
                                            <option value="第四节">第四节</option>
                                        </select>
                                    </div></th>
                                    <th>请假理由</th>
                                </tr>
                            </table>
                            <div class="tb_wrapper1">
                                <table>
                                    <colgroup>
                                        <col class="col1">
                                        <col class="col2">
                                        <col class="col2">
                                        <col class="col2">
                                        <col class="col3">
                                    </colgroup>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="banner_item">
                    <div class="content">
                        <div class="content_top">
                            <p style="color: white;">调研学系统为您开放！</p>
                            <div class="btn">
                                <a href="javascript:;" id="adjust_record">
                                    <img src="/image/1.png" alt=""><span>已调整<span style="color: red;">0</span>次</span>
                                </a>
                                <a href="javascript:;" id="adjust_log">
                                    <img src="/image/6.png" alt=""><span>调整历史</span>
                                </a>
                            </div>
                        </div>
                        <div class="content_main">
                            <div class="adjust_name">
                                <img src="/image/8.png" alt=""><span>申请人</span>
                                <input type="text" id="adjust_info">
                            </div>
                            <div class="adjust_message">
                                <img src="/image/3.png" alt="">
                                <span>性别</span>
                                <select name="" id="adjust_info">
                                    <option selected disabled></option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                                <img src="/image/9.png" alt="">
                                <span>方向</span>
                                <select name="" id="adjust_info">
                                    <option selected disabled></option>
                                    <option value="全栈">全栈</option>
                                    <option value="Java">Java</option>
                                    <option value="人工智能">人工智能</option>
                                    <option value="CPU&OS">CPU & OS</option>
                                    <option value="设计">设计</option>
                                    <option value="秘书处">秘书处</option>
                                </select>
                                <img src="/image/4.png" alt="">
                                <span>期次</span>
                                <select name="" id="adjust_info">
                                    <option selected disabled></option>
                                    <option value="六">六</option>
                                    <option value="七">七</option>
                                    <option value="八">八</option>
                                </select>
                            </div>
                            <div class="adjust_time">
                                <img src="/image/7.png" alt="">
                                <span>申请时间</span>
                                <input type="text" placeholder="年-月-日" id="adjust_info">
                                <select name="" id="adjust_info" style="margin-right: 0px;">
                                    <option selected disabled></option>
                                    <option value="一">一</option>
                                    <option value="二">二</option>
                                    <option value="三">三</option>
                                    <option value="四">四</option>
                                </select><span>节</span>
                            </div>
                            <div class="adjust_time">
                                <img src="/image/2.png" alt="">
                                <span>调整时间</span>
                                <input type="text" placeholder="年-月-日" id="adjust_info">
                                <select name="" id="adjust_info" style="margin-right: 0px;">
                                    <option selected disabled></option>
                                    <option value="一">一</option>
                                    <option value="二">二</option>
                                    <option value="三">三</option>
                                    <option value="四">四</option>
                                </select><span>节</span>
    
                            </div>
                            <div class="adjust_cause">
                                <img style="vertical-align:top;" src="/image/5.png" alt="">
                                <label style="vertical-align:top;">申请理由</label>
                                <textarea name="" id="adjust_info" cols="70" rows="3"></textarea>
                            </div>
                            <div class="leave_btn"><button>提交</button></div>
                        </div>
                        
    
                    </div>
                    <div class="wrapper">
                        <div class="banner_top">
                            <div class="back_btn" id="back_btn">返回</div>
                            <div class="detail">
                                <input id="name2" type="text" placeholder="输入名字发起搜索">
                                <button id="search2">搜索</button>
                                <div class="history"><img src="https://s2.loli.net/2023/02/03/QjUeVA4XqZgaG9p.png"  style="width:16px;height: 16px;"><span id="history2" style="cursor: pointer;">本周历史</span></div>
                            </div>
                        </div>
                        <div class="banner_hidden">
                            <p>还没有请假记录哦~~</p>
                        </div>
                        <div class="banner_table">
                            <table>
                                <colgroup>
                                    <col class="col1">
                                    <col class="col4">
                                    <col class="col4">
                                    <col class="col2">
                                    <col class="col2">
                                    <col class="col3">
                                </colgroup>
                                <tr>
                                    <th>姓名</th>
                                    <th class="fangxiang">方向<div class="fx1">
                                        <select id="f4">
                                            <option style='display: none'></option>
                                            <option value="秘书处">秘书处</option>
                                            <option value="设计">设计</option>
                                            <option value="AI">AI</option>
                                            <option value="CPU&OS">CPU&OS</option>
                                            <option value="Java">Java</option>
                                            <option value="全栈">全栈</option>
                                        </select>
                                    </div></th>
                                    <th class="qishu">期数<div class="fx2">
                                        <select id="f5">
                                            <option style='display: none'></option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                        </select>
                                    </div></th>
                                    <th class="shijian">研学时间<div class="fx3">
                                        <select id="f6">
                                            <option style='display: none'></option>
                                            <option value="第一节">第一节</option>
                                            <option value="第二节">第二节</option>
                                            <option value="第三节">第三节</option>
                                            <option value="第四节">第四节</option>
                                        </select>
                                    </div></th>
                                    <th class="shijian">调整时间<div class="fx4">
                                        <select id="f7">
                                            <option style='display: none'></option>
                                            <option value="第一节">第一节</option>
                                            <option value="第二节">第二节</option>
                                            <option value="第三节">第三节</option>
                                            <option value="第四节">第四节</option>
                                        </select>
                                    </div></th>
                                    <th>请假理由</th>
                                </tr>
                            </table>
                            <div class="tb_wrapper2">
                                <table>
                                    <colgroup>
                                        <col class="col1">
                                        <col class="col4">
                                        <col class="col4">
                                        <col class="col2">
                                        <col class="col2">
                                        <col class="col3">
                                    </colgroup>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <div class="banner_item">
                    <div class="content"></div>
                    <div class="wrapper"></div>
                </div>
                <div class="banner_item">
                    <div class="content"></div>
                    <div class="wrapper"></div>
                </div>
                <div class="banner_item">
                    <div class="content"></div>
                    <div class="wrapper"></div>
                </div>
        </div>
        
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/axios.js"></script>
    <script>
        {
            var director_item=document.getElementsByClassName('director_item');
            var temp=0;
            var cn=true;
            var wrapper=document.getElementsByClassName('wrapper');
            var content=document.getElementsByClassName('content');
            var banner_item=document.getElementsByClassName('banner_item');
            var avatar=document.getElementById('avatar');
            var user_event=document.getElementById('user_event');
            var whole_wrapper=document.getElementById('whole_wrapper');
        }
        //初始化
        director_item[temp].style.backgroundColor='#2F4399';
        banner_item[temp].style.display='block';
        document.getElementById("director").addEventListener("click",(event)=>{
            if([...director_item].includes(event.target)){
                director_item[temp].style.backgroundColor='transparent';
                banner_item[temp].style.display='none';
                if(temp!==0){
                    wrapper[temp-1].style.opacity=0;
                    content[temp-1].style.opacity=0;
                }
                event.target.style.backgroundColor='#2F4399';
                temp=[...director_item].indexOf(event.target);
                banner_item[temp].style.display='block';
                switch(temp){
                    case 0:
                        whole_wrapper.style.background='url(./img/bgd1.png)';
                        break;
                    case 1:
                        whole_wrapper.style.background='url(./img/bgd2.png)';
                        break;
                    case 2:
                        whole_wrapper.style.background='url(./img/bgd3.png)';
                        break;
                    case 3:
                        whole_wrapper.style.background='url(./img/bgd4.png)';
                        break;
                    case 4:
                        whole_wrapper.style.background='url(./img/bgd1.png)';
                        break;
                }
                if(temp!==0){
                    setTimeout(()=>{
                        wrapper[temp-1].style.opacity=1;
                        content[temp-1].style.opacity=1;
                    },100);
                }
            }
        });
    </script>
    <script src="getRecord.js"></script>
    <script src="index.js"></script>
    <script>
        avatar.onclick=function(){
            if(cn){
                user_event.style.display='block';
                cn=false;
            }else{
                user_event.style.display='none';
                cn=true;
            }
        };
    </script>
    
</body>
</html>